<template>
    <div class="getCode">
        <div class="header">
            <i @click="$router.go(-1)" class="icon-back" style="font-size: 23px; line-height: 42px;"></i>
            <span>登录验证</span>
        </div>
        <div class="content">
            <div class="contentheader">
                <span>请输入{{phone}}收到的短信验证码</span>
            </div>
            <div class="contentCode">
                <!-- 密码输入框 -->
               <van-password-input
                  :value="value"
                  :mask="false"
                  :focused="showKeyboard"
                  @focus="showKeyboard = true"
                />
                <!-- 数字键盘 -->
                <van-number-keyboard
                  v-model="value"
                  :show="showKeyboard"
                  @blur="showKeyboard = false"
                />
            </div>
            <a class="sms_send" @click="sendCode">获取验证码</a>
        </div>
        <div class="bottom">
            <div :class="['butonCode',{'buttonCon':value.length > 5}]" @click="getCode">
                确定
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"getCodeView",
        data() {
            return {
                value:"",
                showKeyboard: true,
                code:"",  //验证码
                setCode:"",  //存储验证码
                phone:""   //电话号码
            };
        },
        methods:{

            // 发送验证码
            sendCode(){
                this.value = ""
                for(var i = 0;i<6 ;i++){
                    this.code += parseInt(Math.random()*6 );
                }
                // console.log(typeof(this.value));
                this.$toast(this.code);
                this.setCode = this.code
                this.code = "" 
            },
            // 获取验证码
            getCode(){
                let code = /^[0-9]{6}$/
                if(!code.test(this.value) || this.setCode != this.value ){//不正确处理
                    this.$toast("请输入正确验证码");
                    return;
                }
                this.$toast.success("登录成功")
                window.localStorage.setItem("token","18163296389");
                this.$router.push("/userInfo")
            }
        },
        created(){
            this.phone = window.sessionStorage.getItem("phone");
            console.log(this.phone);
        }
    }
</script>

<style lang="scss" scoped>

.van-password-input__item{
    background-color: #fbfbfa;
}
.getCode{
    height: 100%;
    background-color: #f3f4f5;

    .header{
        height: 50px;
        border-bottom:1px solid #eeeeee ;
        i{
            margin-left: 15px;
        }

        span{
            flex: 1;
            text-align: center;
            line-height: 36px;
            font-size: 18px;
            // transform: translateX(-19px);
        }
    }
    .content{
        padding-top: 34px;
        background-color: #fff;
        padding-bottom: 26px;
        .contentheader{
            margin-bottom: 10px;
            padding: 0 15px;
            text-align: center;
            
            span{
                font-size: 15px;
            line-height: 20px;
            color: #585c64;
            }
        }

        .sms_send{
            text-align: center;
            font-size: 14px;
            color: #4a90e2;
            line-height: 21px;
            height: 18px;
            margin: 26px auto;
            margin-bottom: 0;
            display: block;
        }
    }
    .bottom{
        padding: 27px 16px 12px;
        
        .butonCode{
            font-size: 16px;
            width: 100%;
            height: 44px;
            text-align: center;
            line-height: 44px;
            background-color: #caccd2;
            border-radius: 5px;
            color: #fff;

            &.buttonCon{
                background-color: #f03867;
            }
        }
    }
}

</style>